<template>
    <div>
        <div slot="header" class="clearfix">
            <span class="search">
                <el-select v-model="selected" style="width: 150px">
                <el-option label="按照订单号搜索" value="orderId"></el-option>
                <el-option label="按照收件人搜索" value="recipient"></el-option>
                </el-select>
                <el-input
                v-model="input"
                placeholder="关键字"
                style="width: 150px"
                ></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </span>
            
        </div>
          <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="orderId"
          label="订单号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="recipient"
          label="收件人"
          width="180">
        </el-table-column>
        <el-table-column
          prop="status"
          label="订单状态">
          <template slot-scope="scope">
            {{
            scope.row.status==1
            ? "未支付"
            :'已支付'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="allPrice"
          label="订单总价">
          <template slot-scope="scope">
            {{
            scope.row.allPrice
            ? "￥"+scope.row.allPrice
            :''}}
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间">
          <template slot-scope="scope">
            {{dateFormat(scope.row.create_time)}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
                <template slot-scope="scope">
                    <el-button @click="goOrderDetail(scope.row._id)" type="text" size="mini">查看详情</el-button>
                </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <el-pagination
          class="pagination"
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="current_change"
          :page-size="pageSize"
          @next-click="handlenext"
          @prev-click="handleprev"
        >
        </el-pagination>
      </div>
    </div>
</template>
<script>
import {getorder,searchorder} from '../api/index'
  export default {
    data() {
      return {
        tableData: [],
        selected:"orderId",
        input:'',
        total:0,
        pageSize:5,
        pageNum:1
      }
    },
    async mounted(){
        let {data}=await getorder({pageNum:1,pageSize:5})
        this.tableData=data.data.list
        this.total=data.data.total
    },
    methods:{
      async getorder(val){
        let {data}=await getorder({pageNum:val,pageSize:5})
        this.tableData=data.data.list
      },
      async searchorder(type,val){
        let {data}=await searchorder({type:type,value:val,pageNum:this.pageNum,pageSize:5})
        this.tableData=data.data.list
        this.total=data.data.total
      },
      search(){
          this.searchorder(this.selected,this.input)
      },
      current_change(val){
          this.pageNum=val
          this.searchorder(this.selected,this.input)
      },
      handlenext(val) {
        this.pageNum=val
        this.searchorder(this.selected,this.input)
      },
      handleprev(val) {
        this.pageNum=val
        this.searchorder(this.selected,this.input)
      },
      goOrderDetail(id){
          this.$router.push({name: 'orderDetail', params: {id}})
      },
      dateFormat: function (time) {
                var date = new Date(time);
                var year = date.getFullYear();
                /* 在日期格式中，月份是从0开始的，因此要加0
                 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                 * */
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                // 拼接
                return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
            },
    }

  }
</script>